<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
    <script>
        var socket = io.connect('http://' + document.domain + ':' + location.port);

        socket.on('connect', function() {
            console.log('Connected to server');
        });

        socket.on('disconnect', function() {
            console.log('Disconnected from server');
        });

        socket.on('update_frontend', function(msg) {
            console.log('Received message from Flask:', msg.data);
            // 在这里调用前端函数或更新UI
            displayMessage(msg.data, msg.time);
        });

        function displayMessage(message, timestamp) {
            var messagesDiv = document.getElementById('messages');
            messagesDiv.innerHTML += '<p>' + timestamp + ': ' + message + '</p>';
        }

        function sendMessage() {
            var message = document.getElementById('messageInput').value;
            socket.emit('message', message);
            document.getElementById('messageInput').value = '';
        }
    </script>
</head>
<body>
    <h1>WebSocket Example</h1>
    <input type="text" id="messageInput" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>
    <div id="messages"></div>
</body>
</html>
